<template>
  <div style="width:480px;height:650px;margin:50px auto 0 auto;background:#efefef;padding:30px 0 0 30px; border-radius:45px">
      <el-form ref="registerForm" :model="registerForm" :rules="registerRules" label-width="80px">
          <el-form-item label="账号" prop="accountNumber">
            <el-input v-model="accountNumber" :disabled="true" ></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="name">
            <el-input v-model="registerForm.name" placeholder="请输入姓名" maxlength="10"
            show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="name" required="required">
            <el-input v-model="registerForm.password" show-password ></el-input>
          </el-form-item>
          <el-form-item label="身份" prop="type" required="required">
            <el-select v-model="registerForm.type" placeholder="请选择您的身份" >
                <el-option
                label="管理员"
                value="0">
                </el-option>
                <el-option
                label="业主"
                value="1">
                </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="身份证号" prop="idCard">
            <el-input v-model="registerForm.idCard"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phone" required="required">
            <el-input v-model="registerForm.phone"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="gender">
            <el-select v-model="registerForm.gender" placeholder="请选择性别" >
                <el-option
                label="男"
                value="0">
                </el-option>
                <el-option
                label="女"
                value="1">
                </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="生日" prop="birthday" required="required">
            <el-date-picker
              v-model="registerForm.birthday"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="楼号" prop="buildingNumber">
            <el-input v-model="registerForm.buildingNumber"></el-input>
          </el-form-item>
          <el-form-item label="单元号" prop="unitNumber">
            <el-input v-model="registerForm.unitNumber"></el-input>
          </el-form-item>
          <el-form-item label="户号" prop="houseNumber">
            <el-input v-model="registerForm.houseNumber"></el-input>
          </el-form-item>
          <el-form-item style="margin-top:30px">
            <el-button type="primary" @click="onRegister('registerForm')">注册</el-button>
            <el-button @click="goLoginPage">取消</el-button>
          </el-form-item>
      </el-form>
  </div>
</template>

<script>
import webservice from '../../utils/webservice'
export default {
    data(){
        //校验手机号
        var validatephone = (rule, value, callback) => {
        var reg = /^1[3|4|5|7|8][0-9]{9}$/; //验证规则
        var flag = reg.test(value); //true
        setTimeout(() => {
          if (value === '') {
            callback(new Error('请输入手机号'));
          } else {
            if (!flag) {
              callback(new Error('请输入正确格式的手机号'));
            } else {
              callback();
            }
          }
        }, 100);
      };
      //校验身份证号
        var validateidCard = (rule, value, callback) => {
        // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
        var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
        var flag = reg.test(value); //true
        setTimeout(() => {
          if (value === '') {
            callback(new Error('请输入身份证号'));
          } else {
            if (!flag) {
              callback(new Error('请输入正确格式的身份证号'));
            } else {
              callback();
            }
          }
        }, 100);
      };
        return{
            registerForm:{}, //用户注册时填写的内容
            accountNumber:'',//获取到的账号
            registerRules:{  //注册检验
                 name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' }
                 ],
                 phone: [
                     { validator: validatephone, trigger: 'blur' }
                 ],
                 idCard: [
                     { validator: validateidCard, trigger: 'blur' }
                 ],
                 password: [
                     { required: true, message: '请输入密码', trigger: 'blur' }
                 ],
                 type: [
                     { required: true, message: '请选择您的身份', trigger: 'blur' }
                 ],
            },
            
        }
    },
    created(){
        this.getAccountNumber()
    },
    mounted(){
        
    },
    methods:{
        //注册
         onRegister(formName){
             this.$refs[formName].validate((valid)=>{
                 if(valid){
                    let params ={
                    accountNumber:this.accountNumber,
                    password:this.registerForm.password,
                    name:this.registerForm.name,
                    gender:this.registerForm.gender,
                    type:this.registerForm.type,
                    idCard:this.registerForm.idCard,
                    phone:this.registerForm.phone,
                    buildingNumber:this.registerForm.buildingNumber,
                    unitNumber:this.registerForm.unitNumber,
                    houseNumber:this.registerForm.houseNumber,
                    birthday:this.registerForm.birthday,
                }
                webservice.HttpPost(
                    "/api/user/register",params,
                    (data) => {
                    if (data.code === 200) {
                        this.$message.success({
                            message: '注册成功,请前往登录页进行登录',
                            showClose: true,
                            duration: 2000,
                        });
                        this.$router.push('/login')
                    }else{
                        this.$message.error({
                            message: data.message,
                            showClose: true,
                            duration: 1000,
                        });
                    }
                    }
            );
                 }
             })
            
        },
        //获取随机产生的账号
        getAccountNumber(){
            webservice.HttpPost(
                "/api/user/getAccountNumber",'',
                (data) => {
                if (data.code === 200) {
                    this.accountNumber = data.data
                } else{
                    this.$message.error({
                        message: data.message,
                        showClose: true,
                        duration: 1000,
                    });
                }
                }
            );
            
        },
        //返回登录页
        goLoginPage(){
            this.$router.push('/login')
        }
    }
}
</script>

<style scoped>
    /* .el-input /deep/.el-input__inner{
        width: 80%!important;
    } */
    .el-input{
    width:70%;
    }
    .el-select{
    width:70%;
    }
</style>